<template>
  <div class="container">
    <!-- 头部的 -->
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="3">
        <div class="grid-content bg-l">
          <img src="../../assets/Verification/pal  logo.png" alt="">
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-r">
          <div class="bg-box">
            <img src="../../assets/Verification/phone.png" alt="">
          </div>
          <div class="contus">
            <span>全国服务热线</span>
            <font>400-716-2588</font>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 标题部分 -->
    <el-row>
      <el-col :span="3">
        <div class="grid-content bg-purple-dark">
          <p></p>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple-dark">
          <p>欢迎注册SPF-Pal平台</p>
        </div>
      </el-col>
    </el-row>
    <!-- steps条 -->
    <el-steps :active="2" align-center finish-status="success" simple
              style="margin-top:52px;width:63%;margin-left:300px">
      <el-step title="账号注册"></el-step>
      <el-step title="完善资料"></el-step>
      <el-step title="注册成功"></el-step>
    </el-steps>
    <!-- 注册表单 -->
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="el-form">
      <el-form-item prop="companyName">
        <el-input prefix-icon="el-icon-office-building" v-model="form.companyName" placeholder="您的公司名称"
                  style="width:400px">
        </el-input>
      </el-form-item>
      <el-form-item prop="userName">
        <el-input prefix-icon="el-icon-user" v-model="form.userName" placeholder="您的姓名" style="width:400px"></el-input>
      </el-form-item>
      <el-form-item prop="email">
        <el-input prefix-icon="el-icon-message" v-model="form.email" placeholder="您的工作邮箱" style="width:400px">
        </el-input>
      </el-form-item>
      <el-form-item prop="checked">
        <el-checkbox v-model="form.checked" style="color:#39A4FF">已阅读并同意《SPF-Pal注册协议》</el-checkbox>
      </el-form-item>
      <!-- //注册的请求 -->
      <el-form-item>
        <el-button type="primary" style="width:400px" @click=gotoReg3()>立即注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                active: 0,
                form: {
                    companyName: '',
                    userName: '',
                    email: '',
                    checked: '',
                },
                regterMessageList: {
                    confirmPassword: 'string',
                    email: 'string',
                    mobile: 'string',
                    mobileValidateCode: 'string',
                    password: 'string',
                    picValidateCode: 'string',
                    realName: 'string',
                    stamp: 'string',
                    tenantName: 'string'
                },
                rules: {
                    companyName: [{required: true, message: '请输入公司名称', trigger: 'blur'}],
                    userName: [{required: true, message: '请输入姓名', trigger: 'blur'}],
                    email: [{required: true, message: '请输入工作邮箱', trigger: 'blur'}],
                    checked: [{required: true, message: '请勾选', trigger: 'blur'}],
                },
            }
        },

        methods: {
            next() {
                if (this.active++ > 3) this.active = 0
            },

            resetForm(formName) {
                this.$refs[formName].resetFields()
            },
            //注册用户的异步方法
            async gotoReg3() {
                var ok = false
                this.$refs.form.validate(valid => {
                    if (valid) {
                        ok = valid;
                    }
                })
                if (!ok) {
                    return
                }
                this.regterMessageList.tenantName = this.form.companyName
                this.regterMessageList.realName = this.form.userName
                this.regterMessageList.email = this.form.email
                console.log(this.regterMessageList)
                const {data: res} = await this.$http.post(
                    '/tenant/no-limit/regist',
                    this.regterMessageList
                )
                console.log(res)
                if (res.code != 0) {
                    return this.$message.error(res.msg)
                }
                this.$router.push('/registersetp3')
            },

            //获取cookie
            getRegterMessageListCookie() {
                this.regterMessageList.password = window.localStorage.getItem('password')
                this.regterMessageList.confirmPassword = window.localStorage.getItem('confirmPassword')
                this.regterMessageList.mobile = window.localStorage.getItem('receiverAccount') //手机号
                this.regterMessageList.picValidateCode = window.localStorage.getItem('picValidateCode') //图片内容
                this.regterMessageList.mobileValidateCode = window.localStorage.getItem('mobileValidateCode') //手机验证码
                this.regterMessageList.stamp = window.localStorage.getItem('stamp')
                this.regterMessageList.tenantName = this.form.companyName
                this.regterMessageList.realName = this.form.userName
                this.regterMessageList.email = this.form.email
                console.log(this.regterMessageList)
            }
        },

        created() {
            this.getRegterMessageListCookie()
        }
    }
</script>
<style lang="less" scoped>
  .container {
    background-color: #eff3f8;
    height: 920px;
  }

  .row-bg {
    background-color: #f2f2f2;
    box-shadow: 0px 0px 16px 0px rgba(74, 74, 74, 0.5);
  }

  .bg-l,
  .bg-r {
    margin-top: 28px;
    margin-left: 63px;
  }

  .bg-r {
    // width: 100%;
    height: 41px;

    .bg-box {
      float: left;
    }

    .contus {
      float: left;
    }
  }

  .bg-r img {
    display: inline-block;
    width: 40px;
    height: 41px;
  }

  span {
    display: block;
    width: 90px;
    height: 15px;
    font-size: 15px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: rgba(82, 82, 82, 1);
    margin-top: -3px;
    margin-left: 5px;
  }

  font {
    display: block;
    height: 19px;
    font-size: 24px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: rgba(19, 120, 218, 1);
    line-height: 14px;
    margin-top: 11px;
    margin-left: 5px;
  }

  p {
    width: 186px;
    height: 18px;
    font-size: 19px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: rgba(85, 85, 85, 1);
    line-height: 20px;
    margin-top: 40px;
  }

  .el-form {
    width: 500px;
    margin: auto;
    margin-top: 120px;
  }

  .demo-ruleForm {
    margin-top: 0px;
    margin-left: -20px;
  }
</style>
